<template>
	<div class="content">
		<div class="tab">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="总销售量统计" name="1">
				<Total v-if="activeName==='1'"></Total>
			</el-tab-pane>
			<el-tab-pane label="门店销售量统计" name="2">
				<Shop v-if="activeName==='2'"></Shop>
			</el-tab-pane>
		</el-tabs>
		</div>
		<div class="proportion">
			<div class="proportion-left left">
				<div class="proportion-title">| 年总销售产品占比</div>
				<AnnualTotalProportion></AnnualTotalProportion>
			</div>
			<div class="proportion-right right">
				<div class="proportion-title">| 门店年销售产品占比</div>
				<ProportionOfStores></ProportionOfStores>
			</div>
		</div>
	</div>
</template>

<script>
import Total from './components/Total'
import Shop from './components/Shop'
import AnnualTotalProportion from './components/AnnualTotalProportion'
import ProportionOfStores from './components/ProportionOfStores'
export default {
	components:{
		Total,
		Shop,
		AnnualTotalProportion,
		ProportionOfStores
	},
	data() {
		return {
			activeName: '1'
		}
	},
	methods: {
		handleClick(tab, event) {
			console.log(tab, event);
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
	.tab{
		padding:10px;
	}
	.proportion{
		overflow:hidden;
		border-top:10px solid #f1f6fd;
		padding:10px;
	}
	.proportion-left,.proportion-right{
		width:50%;
	}
	.proportion-title{
		color:#3f66f5;
	}
</style>
